<template>

    <!---搜索表单-->
    <!-- <div class="search-div">
        <el-form label-width="70px" size="small">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="病种类型">
                        <el-input v-model="queryDto.mname"
                                style="width: 100%"
                                placeholder="病例"
                                ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="display:flex">
                <el-button type="primary" size="small" @click="findAllShuju">
                    搜索
                </el-button>
                <el-button size="small" @click="resetData">重置</el-button>
            </el-row>
        </el-form>
    </div> -->

    <!--添加按钮-->
    <div class="tools-div">
        <el-button type="success" size="small" @click="addMovement">添 加</el-button>
    </div>

    <!---数据表格-->
    <el-table :data="list" style="width: 100%">
        <el-table-column prop="correction" label="饮食方案名称" />
        <el-table-column prop="details" label="饮食方案建议" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" align="center" width="280" #default="scope">
            <el-button type="danger" size="small" @click="deleteById(scope.row)">
                删除
            </el-button>
        </el-table-column>
    </el-table>

    <!-- 添加/修改 -->
    <el-dialog v-model="dialogVisible" title="添加/修改" width="40%">
        <el-form label-width="120px">
            <el-form-item label="饮食方案">
                <el-input v-model="options.correction"/>
            </el-form-item>
            <el-form-item label="饮食方案建议">
                <el-input type="textarea" autosize placeholder="请输入内容" v-model="options.details">
                </el-input>
            </el-form-item>

            <el-form-item label="运动类型列表">
                <el-checkbox-group v-model="DietOptionIds.dietOptionList">
                    <el-checkbox v-for="role in ids" :key="role.id" :label="role.id" :value="role.id">
                        {{ role.dname }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button @click="falseAll">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog> 

    <!--分页条-->
    <el-pagination
                    v-model:current-page="pageParams.page"
                    v-model:page-size="pageParams.limit"
                    :page-sizes="[10, 20, 50, 100]"
                    @size-change="findoptions"
                    @current-change="findoptions"
                    layout="total, sizes, prev, pager, next"
                    :total="total"
        />
</template>

<script setup>
import { ref,onMounted } from 'vue'; 
import {findOption,DeleteOption,findDietmanageAll,addOptionAndDiet} from '@/api/option';
import { ElMessage,ElMessageBox } from 'element-plus'

//数据模板
let list = ref([])
//分页总条数
let total = ref(0)

const pageParamsForm = {
    page : 1,
    limit: 3
}

const options = ref({
    id:'',
    correction:'',
    details:''
})
const ids = ref([])

const dialogVisible = ref(false)

//添加的对象
const DietOptionIds = ref({
    option: options.value,
    dietOptionList:[]
})

//确认按钮
const submit = async ()=>{
    const {code} = await addOptionAndDiet(DietOptionIds.value)
    if(code === 200) {
        dialogVisible.value = false
        ElMessage.success('操作成功')
        findoptions()
    }
}


const pageParams = ref(pageParamsForm)
onMounted(()=>{
    findoptions()
    findDietmanage()
})

const findoptions = async()=>{
    const {data} = await findOption()
    list.value = data
}
//查询所有饮食管理数据
const findDietmanage = async()=>{
    const {data} = await findDietmanageAll()
    ids.value = data
}

//打开添加弹框
const addMovement = ()=>{
    dialogVisible.value = true
}
//弹框取消按钮
const falseAll = ()=>{
    dialogVisible.value = false
}

const deleteById = async(row)=>{
    ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
       const {code } = await DeleteOption(row.id)
       if(code === 200) {
            ElMessage.success('删除成功')
            findoptions()
       }
    })
}


</script>

<style lang="scss" scoped>

</style>